import React, { useEffect, useState } from 'react'

export default function App() {
  //useState 
  /*
  useState让函数式组件支持state状态
  useState接收的参数是state的初始值
  useState返回一个两个参数的数组,
  -第一个参数是这个state,
  -第二个参数是一个函数,函数可以替换原来state的值,这个函数的修改和setState都是异步的
  react会在重复渲染时记住它当前state的值,并提供最新的值给函数
  */

  //useEffect 
/*
useEffect接收两个参数,第一个参数是一个函数 根据状态在初始化,更新时,销毁前触发
-第二个参数是一个数组
-当第二个参数是个空数组,只在初始化时执行一次
-当第二个参数是state时,初始化和state改变时触发
-当第二个参数不写时,初始化和每个state改变时都触发一次
*/
  const [count, setCount] = useState(0)

  const setCountHandle = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <p>累加的值是{count}</p>
      <button onClick={setCountHandle}>点击累加</button>
    </div>
  )
}
